<template>
  <div class="add-page">

    <back/>

    <div class="add-page-container">
      <el-form :model="addForm" ref="ruleForm" label-width="90px" label-position="left" class="demo-ruleForm">

        <div>
          <h1>基本信息</h1>
          <div class="container-section-Two">
            <div class="section-left">
              <el-form-item label="姓名：" prop="name">
                <el-input v-model="addForm.customer_name"placeholder="请输入姓名"></el-input>
              </el-form-item>

              <el-form-item label="联系方式：" prop="phone">
                <el-input type="number" v-model="addForm.contact" placeholder="请输入手机"></el-input>
              </el-form-item>

              <el-form-item label="微信：" prop="phone">
                <el-input type="number" v-model="addForm.contact" placeholder="请输入微信"></el-input>
              </el-form-item>


              <!--<el-form-item label="邮箱：" prop="email">
                <el-input v-model="addForm.email" placeholder="请输入邮箱账号"></el-input>
              </el-form-item>-->

              <!--<el-form-item label-width="80px" label="职位：" prop="position">
                <el-input v-model="addForm.position" placeholder="请输入职位"></el-input>
              </el-form-item>-->

              <!--<el-form-item label-width="80px" label="性别：" prop="sex">
                <el-radio-group v-model="addForm.sex">
                  <el-radio :label="0">保密</el-radio>
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>-->

            </div>
            <div class="section-right">
              <!--<el-form-item label-width="80px" label="微信：" prop="wechat">
                <el-input v-model="addForm.wechat" placeholder="请输入微信号"></el-input>
              </el-form-item>

              <el-form-item label-width="80px" label="支付宝：" prop="alipay">
                <el-input v-model="addForm.alipay" placeholder="请输入支付宝账号"></el-input>

              </el-form-item>-->
            </div>
          </div>
        </div>

        <div>
          <h1>地址信息</h1>
          <div class="container-section">
            <el-form-item label="地址：" prop="unit_name">
              <el-cascader placeholder="选择所在的地址" :options="ORIGIN" :props="{value:'label'}" v-model="addressInfo"
                           filterable></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址：" prop="address">
              <el-input style="width: 350px" v-model="addForm.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>
          </div>
        </div>

        <div>
          <h1>其他</h1>
          <div class="container-section">
            <!--<el-form-item label="线索阶段：">
              <el-select filterable v-model="addForm.clue_stage_id" placeholder="线索阶段">
                <el-option v-for="opt in clueStageList" :key="opt.id" :value="opt.id" :label="opt.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="标签：">
              <add-tag @setLabel="setClueLabel" type="clue" :dynamicTagsTemp="dynamicTagsTemp" />
            </el-form-item>-->
            <el-form-item label="备注：" prop="email">
              <el-input style="width: 450px" type="textarea" v-model="addForm.remark" placeholder="备注"></el-input>
            </el-form-item>
          </div>
        </div>

        <!--<div>
          <h1 @click="test">团队成员</h1>
          <div class="container-section">
            <el-form-item label="团队成员：">
              <el-select multiple filterable v-model="teamForm" placeholder="团队成员">
                <el-option v-for="opt in staffList" :key="opt.id" :value="opt.id" :label="userData(opt)" />
              </el-select>
            </el-form-item>
          </div>
        </div>-->

        <div style="padding: 20px 0 10px 20px">
          <el-button size="medium" type="primary" @click="addSubmitBtn()">{{addForm.id?'修改':'添加'}}</el-button>
          <el-button @click="$router.back(-1)" size="medium" style="margin-left:20px;">取消</el-button>
        </div>

      </el-form>
    </div>

  </div>
</template>

<script>
  import ORIGIN from '../../../assets/json/origin.json'
  /*import add_tag from "@/views/components/add_tag/add_tag";*/
  export default {
    name: "add_clue",
    /*components: {
      "add-tag": add_tag
    },*/
    data() {
      return {
        ORIGIN,
        clueStageList: [],
        addressInfo: ['','',''],
        unitAddressInfo: ['','',''],
        addForm: {
          id: '',
          customer_name: '',
          contact: '',
          province: '',
          city: '',
          area: '',
          address: '',
          is_invalid: 1,
          remark: '',
          wechat: ''
        },
        dynamicTagsTemp: [],//修改时传给添加标签组件
        staffList: [],
        teamForm: [],
      };
    },
    computed: {
      // queryStaffList() {
      //   const _this = this;
      //   return this.staffList.filter(item => {
      //     return item.phone.indexOf(_this.query) !== -1;
      //   })
      // },
      userData() {
        return function (opt) {
          return `${opt.admin_name} -- ${opt.phone}`;
        }
      },
    },
    mounted() {
      if(this.$route.query.id){
        this.getClueDetail(this.$route.query.id)
      }
      /*this.getClueStageList()*/
      this.getStaffList();
    },
    methods: {

      //获取线索阶段列表数据
      async getClueStageList() {
        let params = {
          limit:999,
          page:1,
        }
        const res = await this.$api.getClueStageList(params)
        if(res.data.level=="success"){
          this.clueStageList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      },

      //获取团队列表数据
      async getStaffList() {
        let params = {
          limit:999,
          page:1,
          clue_id: this.$route.query.id
        }
        const res = await this.$api.getStaffList(params)
        if(res.data.level=="success"){
          this.staffList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      },

      //获取详情
      async getClueDetail(id) {
        const loadingOne = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const res = await this.$api.getClueDetail({id: id})
        if(res.data.level=="success"){
          let data = res.data.data
          this.addForm.id = data.id
          this.addForm.name = data.name
          this.addForm.contact = data.contact
          this.addForm.email = data.email
          this.addForm.remark = data.remark
          this.addressInfo = [data.province,data.city,data.area]
          this.addForm.clue_stage_id = parseInt(data.clue_stage_id)
          this.addForm.address = data.address
          data.label_list.forEach((item,index) => {
            this.addForm.label_ids.push(parseInt(item.label_id))
            this.dynamicTagsTemp.push(item.label_name)
          })
        } else {
          this.$message.error(res.data.message)
        }
        loadingOne.close()
      },

      //新增提交按钮
      async addSubmitBtn(){
        this.addForm.province = this.addressInfo[0]
        this.addForm.city = this.addressInfo[1]
        this.addForm.area = this.addressInfo[2]

        const params = this.addForm;
        const res = await this.$api.setCustomerClue(params);
        if(res.data.level=='success'){
          this.$message({
            message: this.addForm.id?'修改成功':'添加成功',
            type: 'success',
          });
          this.$router.back(-1)
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },

      //添加标签
      setClueLabel(data) {
        if(!data){
          return
        }
        if(data.type=="add"){
          this.addForm.label_ids.push(data.id)
        } else{
          this.addForm.label_ids.splice(data.id, 1);
        }
      },

      // 测试
      test() {
        console.log(this.staffList);
      }
    }
  }
</script>

<style lang="scss" scoped>

  .add-page{
    background-color: #ffffff;
    min-height: 100%;

    h1{
      font-size: 18px;
    }

    .add-page-container{
      padding: 10px 20px;

      .container-section{

      }

      .container-section-Two{
        display: flex;
        justify-content: space-between;
      }

      .section-left{
        width: 47%;
      }

      .section-right{
        width: 47%;
      }

    }
  }

</style>
